<template>
    <block>
        <!--#ifdef MP-WEIXIN-->
        <include src="/static/wxml/index.wxml"></include>
        <!--#endif-->
        <label v-if="formType" for="global__getPhoneNumber">
            <button :type="type" :plain="plain" :disabled="disabled" :lang="lang" :loading="loading" :class="mClass"
                    :style="mStyle" :openType="openType" :size="size" :formType="formType || 'submit'"
                    :hoverClass="hoverClass"
                    :hoverStopPropagation="hoverStopPropagation" :hoverStartTime="hoverStartTime"
                    :hoverStayTime="hoverStayTime" :sessionFrom="sessionFrom" :sendMessageTitle="sendMessageTitle"
                    :sendMessagePath="sendMessagePath" :sendMessageImg="sendMessageImg" :appParameter="appParameter"
                    :showMessageCard="showMessageCard"
                    @getuserinfo="handleGetUserInfo" @contact="handleContact" @getphonenumber="handleGetPhoneNumber"
                    @error="handleError" @opensetting="handleOpenSetting"
                    @launchapp="handleLaunchapp" @tap="handleTap">
                <slot></slot>
            </button>
        </label>
        <label v-else for="global__getPhoneNumber">
            <form report-submit @submit="handleSubmit" @reset="handleReset">
                <button :type="type" :plain="plain" :disabled="disabled" :lang="lang" :loading="loading" :class="mClass"
                        :style="mStyle" :openType="btnOpenType" :size="size" :formType="formType || 'submit'"
                        :hoverClass="hoverClass" :hoverStopPropagation="hoverStopPropagation"
                        :hoverStartTime="hoverStartTime"
                        :hoverStayTime="hoverStayTime" :sessionFrom="sessionFrom" :sendMessageTitle="sendMessageTitle"
                        :sendMessagePath="sendMessagePath" :sendMessageImg="sendMessageImg" :appParameter="appParameter"
                        :showMessageCard="showMessageCard"
                        @getuserinfo="handleGetUserInfo" @contact="handleContact" @getphonenumber="handleGetPhoneNumber"
                        @error="handleError" @opensetting="handleOpenSetting"
                        @launchapp="handleLaunchapp" @tap="handleTap">
                    <slot></slot>
                </button>
            </form>
        </label>
    </block>
</template>

<script>
    let Storage;
    export default {
        name: "tl-button",
        externalClasses: ['tl-class'],
        data () {
            return {
                auth: {
                    userInfo: false
                },
                isTapAuthUserInfo: false,
                set isTapAuthUserInfoBtn (bol) {
                    this.isTapAuthUserInfo = !!bol;
                    Storage.setStorageSync('isTapAuthUserInfo', !!bol);
                }
            }
        },
        props: {
            isLogin: Boolean,
            mClass: String,
            mId: String,
            mStyle: String,
            //微信开放能力
            openType: String,
            size: String,//按钮的大小
            type: String,//按钮的样式类型
            plain: Boolean,//按钮是否镂空，背景色透明
            disabled: Boolean,//是否禁用
            loading: Boolean,//名称前是否带 loading 图标
            //用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件
            formType: String,
            //指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
            hoverClass: {
                type: String,
                default: 'none'
            },
            hoverStopPropagation: Boolean,
            //按住后多久出现点击态，单位毫秒
            hoverStartTime: {
                type: Number,
                default: 20
            },
            // 手指松开后点击态保留时间，单位毫秒
            hoverStayTime: {
                type: Number,
                default: 70
            },
            // 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。
            lang: {
                type: String,
                default: 'zh_CN'
            },
            sessionFrom: String,
            sendMessageTitle: String,
            sendMessagePath: String,
            sendMessageImg: String,
            appParameter: String,
            //是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效
            showMessageCard: Boolean,
        },
        computed: {
            btnOpenType () {
                const isTapAuthUserInfo = this.isTapAuthUserInfo;
                const openType = this.openType;
                if ((openType === 'getUserInfo' || this.$util.jude.isEmpty(openType))) {
                    return isTapAuthUserInfo ? '' : 'getUserInfo';
                } else {
                    return this.openType
                }
            }
        },
        created () {
            Storage = this.$Storage;
            const auth = Storage.getStorageSync('__authSetting__');
            if (auth) this.auth.userInfo = !!auth['scope.userInfo'];
            this.isTapAuthUserInfo = Storage.getStorageSync('isTapAuthUserInfo');
        },
        methods: {
            // 用户点击该按钮时，会返回获取到的用户信息，
            // 回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效
            async handleGetUserInfo (result) {
                if (this.isLogin) {
                    const detail = await this.$auth.getUserInfo();
                    // if (this.openType === 'getUserInfo' && this.isTapAuthUserInfo) {
                    //     detail = await this.$auth.getUserInfo();
                    // } else if (result && result.type === 'getuserinfo' && result.detail) {
                    //     detail = result.detail;
                    // }
                    if (detail && detail.errMsg) {
                        detail.status = /^getUserInfo:ok/ig.test(detail.errMsg);
                        this.isTapAuthUserInfoBtn = !/^getUserInfo:fail/ig.test(detail.errMsg);
                    }
                    detail && this._emit(detail, 'getuserinfo');
                }
            },
            // 客服消息回调，open-type="contact"时有效
            handleContact (e) {
                this._emit(e, 'contact')
            },
            // 获取用户手机号回调，open-type=getPhoneNumber时有效
            handleGetPhoneNumber (result) {
                this._emit(result.detail, 'getphonenumber')
            },
            // 当使用开放能力时，发生错误的回调，open-type=launchApp时有效
            handleError (e) {
                this._emit(e, 'error')
            },
            // 在打开授权设置页后回调，open-type=openSetting时有效
            handleOpenSetting (e) {
                this._emit(e, 'opensetting')
            },
            // 打开 APP 成功的回调，open-type=launchApp时有效
            handleLaunchapp () {
                this._emit(e, 'launchapp')
            },
            handleSubmit (e) {
                this._emit(e, 'submit')
            },
            handleReset (e) {
                this._emit(e, 'reset')
            },
            handleTap (e) {
                this.isTapAuthUserInfo && this.handleGetUserInfo();
                this._emit(e, 'tl-tap')
            },
            eventMerge () {

            },
            _emit (e, t) {
                const type = e.type === 'click' ? 'tap' : e.type;
                // console.log(e, '+++++++tl-button点击事件++++++');
                this.$emit(t || type, e)
            }
        }
    }
</script>
